<template>
  <div class="container">
    <div class="head">
      <div class="img">
        <img src="../../assets/NJUST.jpeg" />
      </div>
      <div class="person">
        <img src="../../assets/用户名.png" />
       <li class="li1"><router-link to="/person"><span>个人主页</span></router-link></li>
      </div>
      <div class="list">
        <img src="../../assets/购物车.png" />
        <li class="li1"><router-link to="/sample"><span>我的清单</span></router-link></li>
      </div>
    </div>

    <div class="crumbs">
        <nav>
            <a href="#">首页</a><span>/</span>
            <a href="#">XXXX标准</a><span>/</span>
            <a href="#">XXXX项目</a>
        </nav>
        <div class="standard"><a href="#">GB 19083-2023 4.4</a></div>
    </div>
    <main class="main-content">
      <h2>请选择您要处理的模块</h2>
      <div class="module-grid">
        <button @click="handleClick('人员')">人员</button>
        <button @click="handleClick('设备')">设备</button>
        <button @click="handleClick('规程')">规程</button>
      </div>
      <div class="footer-content">
        <div class="back">
          <img src="../../assets/返回.png" @click="goBack" />
        </div>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  name: 'ModuleSelection',
  methods: {
    handleModuleClick(module) {
      console.log(`Selected module: ${module}`);
      // 在这里添加逻辑来处理模块点击事件
    },
    goBack() {
      this.$router.push({ path: '/home1' });
    },
  }
}
</script>

<style scoped>
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
}

  .head {
    width: 100%;
    background-color: #abe0f3;
    height: 6vh;
  }

    .head .img {
      height: 100%;
      float: left;
    }

      .head .img img {
        height: 100%;
      }

    .head .list {
      float: right;
      height: 45%;
    }

      .head .list img {
        margin-top: 15px;
        margin-right: 7px;
        height: 100%;
        float: left;
      }

      .head .list li {
        margin-top: 20px;
        margin-right: 40px;
        display: block;
        float: left;
        font-size: 18px;
      }

    .head .person {
      float: right;
      height: 42%;
    }

      .head .person img {
        margin-top: 15px;
        margin-right: 7px;
        height: 100%;
        float: left;
      }

      .head .person li {
        margin-top: 20px;
        margin-right: 70px;
        display: block;
        float: left;
        font-size: 18px;
      }

.crumbs {
  display: flex; /* 使用Flexbox布局 */
  align-items: center; /* 垂直居中 */
  background-color: #f0f0f0; /* 背景颜色 */
  padding: 10px 20px; /* 内边距 */
}

.crumbs nav a, .crumbs .standard a {
  margin-left: 15px;
  text-decoration: none;
  color: #333;
}

.crumbs .standard {
  margin-left: auto; /* 将标准编号推到最右边 */
}

.main-content {
  margin: 20px 0;
  text-align: center;
}

.module-grid {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}

.module-grid button {
    width: 200px;
    height: 150px;
    margin-right: 10px;
    border-radius: 5px; /* 添加圆角边框 */
    background-color: lightseagreen; /* 设置背景颜色为浅绿色 */
    color: white; /* 设置文字颜色为白色 */
    font-size: 16px; /* 调整字体大小 */
    padding: 10px 20px; /* 调整内边距 */
    cursor: pointer; /* 改变鼠标指针形状 */
}

/* 添加悬停效果 */
.module-grid button:hover {
  opacity: 0.8;
}

.footer-content {
  display: flex; /* 使用Flexbox布局 */
  justify-content: flex-end; /* 水平方向对齐到容器的末尾 */
  align-items: flex-end; /* 垂直方向对齐到容器的末尾 */
  position: relative; /* 相对定位 */
  bottom: 0; /* 底部对齐 */
  right: 0; /* 右侧对齐 */
  width: 100%; /* 宽度占满整个容器 */
  z-index: 10; /* 确保图片在其他内容之上 */
}

/*.footer-image {
  max-width: 20px;*/ /* 根据需要调整大小 */
  /*max-height: 20px;*/ /* 根据需要调整大小 */
/*}*/

  .back {
    float: right;
    margin-top: 50px;
  }

    .back img {
      height: 50px;
      cursor: pointer; /* 当鼠标悬停时显示为手型 */
    }
</style>
